<template>
    <div class="content">
        <div class="head">

            <div class="box">
                <div class="l">
                    <div class="log" :style="{background: 'url(' + img + ')  no-repeat center center'}"></div>
                    <span>信息管理系统</span>
                </div>
                <div class="r">
                    <ul>
                        <li>返回首页</li>
                        <li>网站官网</li>
                        <li>关于我们</li>
                    </ul>
                </div>

                <!-- <img src="img" alt=""> -->

            </div>
        </div>
        <div class="middle">

            <img :src="login_img" class="long-r">
            <div class="login_r" v-show="isShow">
                <span class="dl">登录</span>
                <div class="yh">
                    <input type="text" class="dl_input" v-model="username" placeholder="用户名" />
                    <img :src="ren" class="img1" alt="">
                </div>
                <div class="mima">
                    <input type="password" class="dl_input" v-model="password" placeholder="密码" />
                    <img :src="suo" class="img2" alt="">
                </div>
                <button class="btn" @click="btn">登&nbsp;&nbsp;录</button>

                <div class="zc">
                    <!-- <a href="#" style="font-size:14px; color:#6f6f6f;margin-left:16px;">忘记密码</a> -->
                    <a href="#" @click="changePage" style="font-size:14px; color:#6f6f6f;float:right;margin-right:16px;">立即注册</a>
                </div>
            </div>
            <div class="login_r" v-show="!isShow">
                <span class="dl">注册</span>
                <div class="yh">
                    <input type="text" class="dl_input" v-model="username" placeholder="用户名" />
                    <img :src="ren" class="img1" alt="">
                </div>
                <div class="mima">
                    <input type="password" class="dl_input" v-model="password" placeholder="密码" />
                    <img :src="suo" class="img2" alt="">
                </div>
                <button class="btn" @click="reg">注&nbsp;&nbsp;册</button>

                <div class="zc">
                    <!-- <a href="#" style="font-size:14px; color:#6f6f6f;margin-left:16px;">忘记密码</a> -->
                    <a href="#" @click="changePage" style="font-size:14px; color:#6f6f6f;float:right;margin-right:16px;">立即登录</a>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="wz">
                <ul>
                    <li>在线客服 ｜</li>
                    <li>技术支持 ｜</li>
                    <li>关于我们</li>
                </ul>
                <div style="width:400px">xxxxx科技开发有限公司 © 版权所有 ICP备12008717号</div>
            </div>

        </div>

    </div>
</template>

<script>
export default {
    methods: {
        changePage() {
            //切换页面
            this.isShow = !this.isShow;
            //清空旧数据
            this.username="";
            this.password="";
        },
        reg() {
            //去注册
            const params = new URLSearchParams();
            params.append("username", this.username);
            params.append("password", this.password);
            this.$http
                .post("/toReg", params)
                .then(res => {
                    if (res.status == 200) {
                       this.changePage();
                    }
                })
                .catch(err => {});
        },
        btn() {
            //去登陆
            const params = new URLSearchParams();
            params.append("username", this.username);
            params.append("password", this.password);
            this.$http
                .post("/tologin", params)
                .then(res => {
                    console.log(res);
                    
                     
                    if (res.status == 200) {
                        if(res.data.status =='error'){
                        this.$message.error(res.data.msg);
                    }
                        res = res.data.msg;
                        this.$store.commit("setuserInfo", {
                            u: res.user.username,
                            r: res.roleName,
                            t: res.loginToken
                        });
                        this.$router.push("/");
                    }
                   
                })
                .catch(err => {});
        }
    },
    data() {
        return {
            img: require("../../assets/img/logo.png"),
            login_img: require("../../assets/img/login.png"),
            ren: require("../../assets/img/ren.png"),
            suo: require("../../assets/img/suo.png"),
            username: "",
            password: "",
            isShow: true
        };
    }
};
</script>

<style>
body {
    /* background-color: aqua; */
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
/* .dl_input::-webkit-input-placeholder {
    padding-left: 35px;
}
.dl_input:-moz-placeholder {
    padding-left: 35px;
}
.dl_input:-ms-input-placeholder {
    padding-left: 35px;
} */
.head {
    width: 100%;
    height: 100px;
    position: relative;
}
.head .box {
    width: 954px;
    height: 50px;
    position: absolute;
    bottom: 6px;
    left: 50%;
    margin-left: -477px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.head .box .l {
    flex: 1;
    display: flex;
    flex-direction: row;
    text-align: center;
}
.head .box .l span {
    font-family: "黑体";
    font-size: 20px;
    font-weight: 600;
    color: #005da2;
    line-height: 50px;
    margin-left: 7px;
}
.head .box .r {
    flex: 1;
}
.head .box .r ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: #929292;
    font-size: 13px;
    line-height: 26px;
}
.log {
    width: 58px;
    height: 38px;
}

.middle {
    background-color: #0183e1;
    height: 600px;
    position: relative;
}
.middle .long-r {
    position: absolute;
    left: 240px;
    bottom: 0;
}
.middle .login_r {
    width: 309px;
    height: 373px;
    background-color: #fff;
    position: absolute;
    right: 355px;
    top: 110px;
    /* border: #005da2 1px solid */
}
/* .login_r .dl{
  overflow: hidden;
} */
.dl {
    font-family: "微软雅黑";
    font-size: 17px;
    color: #0175e2;
    width: 276px;
    height: 48px;
    line-height: 64px;
    display: block;
    margin-left: 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid #ccc;
}
.dl_input {
    width: 245px;
    height: 46px;
    border: 1px solid #ccc;
    margin: 45px 0 0 15px;
    outline: none;
    padding-left: 33px;
}
.yh,
.mima {
    position: relative;
}
.yh .img1 {
    position: absolute;
    left: -17px;
    bottom: -25px;
}
.mima .img2 {
    position: absolute;
    left: 26px;
    bottom: 17px;
}
.btn {
    width: 275px;
    height: 44px;
    background-color: #0183e1;
    border: 0;
    display: block;
    margin: 20px auto;
    color: #fff;
    text-align: center;
    font-size: 20px;
}
.footer {
    height: 80px;
}
.footer .wz {
    width: 278px;
    height: 80px;
    margin: 75px auto;
    color: #94939d;
    font-family: "宋体";
    font-weight: 400;
    font-size: 14px;
}
.footer .wz ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
</style>

